<p>It is possible to provide a CSS file to be used regardless of the theme
  set by the user.</p>
<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img src="Custom app-wide CSS_image.png">
      </td>
      <td>Start by creating a new note and changing the note type to CSS</td>
    </tr>
    <tr>
      <td>
        <img src="2_Custom app-wide CSS_image.png">
      </td>
      <td>In the ribbon, press the “Owned Attributes” section and type <code>#appCss</code>.</td>
    </tr>
    <tr>
      <td>
        <img src="3_Custom app-wide CSS_image.png">
      </td>
      <td>Type the desired CSS.&nbsp;&nbsp;
        <br>
        <br>Generally it's a good idea to append <code>!important</code> for the styles
        that are being changed, in order to prevent other</td>
    </tr>
  </tbody>
</table>

<h2>Seeing the changes</h2>
<p>Adding a new <em>app CSS note</em> or modifying an existing one does not
  immediately apply changes. To see the changes, press Ctrl+Shift+R to refresh
  the page first.</p>
<h2>Sample use cases</h2>
<h3>Customizing the printing stylesheet</h3>
<p>When printing a document or exporting as PDF, it is possible to adjust
  the style by creating a CSS note that uses the <code>@media</code> selector.</p>
<p>For example, to change the font of the document from the one defined by
  the theme or the user to a serif one:</p><pre><code class="language-text-x-trilium-auto">@media print {
	body {
        --main-font-family: serif !important;
        --detail-font-family: var(--main-font-family) !important;
    }
}</code></pre>
<h3>Per-workspace styles</h3>
<p>When using&nbsp;<a class="reference-link" href="#root/_help_9sRHySam5fXb">Workspaces</a>,
  it can be helpful to create a visual distinction between notes in different
  workspaces.</p>
<p>To do so:</p>
<ol>
  <li>In the note with <code>#workspace</code>, add an inheritable attribute <code>#cssClass(inheritable)</code> with
    a value that uniquely identifies the workspace (say <code>my-workspace</code>).</li>
  <li>Anywhere in the note structure, create a CSS note with <code>#appCss</code>.</li>
</ol>
<h4>Change the color of the icons in the&nbsp;<a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a></h4><pre><code class="language-text-x-trilium-auto">.fancytree-node.my-workspace.fancytree-custom-icon {
    color: #ff0000;
}</code></pre>
<h4>Change the color of the note title and the icon</h4>
<p>To change the color of the note title and the icon (above the content):</p><pre><code class="language-text-x-trilium-auto">.note-split.my-workspace .note-icon-widget button.note-icon,
.note-split.my-workspace .note-title-widget input.note-title {
    color: #ff0000;
}</code></pre>
<h4>Add a watermark to the note content</h4>
<figure class="image image-style-align-right image_resized" style="width:39.97%;">
  <img style="aspect-ratio:641/630;" src="1_Custom app-wide CSS_image.png"
  width="641" height="630">
</figure>
<ol>
  <li>Insert an image in any note and take the URL of the image.</li>
  <li>Use the following CSS, adjusting the <code>background-image</code> and <code>width</code> and <code>height</code> to
    the desired values.</li>
</ol><pre><code class="language-text-x-trilium-auto">.note-split.my-workspace .scrolling-container:after {
    position: fixed;
    content: "";
    background-image: url("/api/attachments/Rvm3zJNITQI1/image/logo.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 237px;
    height: 44px;
    bottom: 1em;
    right: 1em;
    opacity: 0.5;
    z-index: 0;
}</code></pre>
<h2>Limitations</h2>
<p>Some parts of the application can't be styled directly via custom CSS
  because they are rendered in an isolated mode (shadow DOM), more specifically:</p>
<ul>
  <li>The slides in a&nbsp;<a class="reference-link" href="#root/_help_zP3PMqaG71Ct">Presentation View</a>.</li>
</ul>